<template>
	<view class="page-box">
		<uni-cusTitle title=' ' :isIcon='true' img='/static/index/jiantou1.png'></uni-cusTitle>
		<view class="lunbo-box">
			<view class="wh100 swiper-tem">
				<swiper class="wh100" @change="change" :current="swiperDotIndex" autoplay circular :interval='2000'>
					<swiper-item v-for="(item, index) in swiperList" :key="index" @click="itemTap(item,index)">
						<view class="wh100">
							<image class="wh100" :src="item.cover_imgurl"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			
			<view class="img-pos" @click="toDetail"> <image src="/static/linqu.png"></image> </view>
		</view>
		
		<view class="content-box">
			<view class="title-box">
				<view class="left">
					<!-- <image src="/static/mine/yuan.png"></image> -->
					<image src="/static/index/daka-icon.png" mode="widthFix"></image>
					<text>溧水区打卡活动</text>
				</view>
				<image class="right" src="/static/mine/more.png" @click="toMore"></image>
			</view>
			
			<template v-if="list.length>0">
				<view class="item-box" v-for="(item,index) in list" :key="index" @click="toDaKa(item)">
					<image class="bg-box" src="/static/index/daka-bg.png"></image>
					<view class="left">
						<view class="big-box">
							<view class="s-box">
								<image class="wh100" :src="item.imgurl" mode="aspectFill"></image>
							</view>
						</view>
					</view>
					<view class="right">
						<view class="title">{{item.title}}</view>
						<view class="fen-box">
							<image src="/static/index/fenshu.png"></image>
							<view class="s-fen-box">
								<image src="/static/sy1.png"></image>
								<text>{{item.fen}}</text>分
							</view>
						</view>
						<view class="addr-box"  @click.stop="daohangTap(item)">
							<image src="/static/index/icon-map5.png"></image>
							<text class="line-two">{{item.addr}}</text>
						</view>
					</view>
				</view>
			
				<view class="no-box" v-if="isMore">无更多数据了...</view>
			</template>
			<template v-else>
				<uni-empty tips="'暂无数据...'" imgurl='/static/index/seach.png'></uni-empty>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				staticUrl:this.$base.staticUrl,
				swiperList:[{
					cover_imgurl: 'http://www.qidoer.com/xcx/static/bg03.png'
				}],
				
				list: [{
					imgurl:'/static/top_back.png',
					title:'天生桥景区',
					fen:'4.5',
					addr:'南京市溧水区洪蓝镇天生桥路500号',
					latitude: 39.909,
					longitude: 116.39742
				},
				{
					imgurl:'/static/top_back.png',
					title:'天生桥景区',
					fen:'4.5',
					addr:'南京市溧水区洪蓝镇天生桥路500号',
					latitude: 39.909,
					longitude: 116.39742
				},
				{
					imgurl:'/static/top_back.png',
					title:'天生桥景区',
					fen:'4.5',
					addr:'南京市溧水区洪蓝镇天生桥路500号',
					latitude: 39.909,
					longitude: 116.39742
				}]
			}
		},
		
		onLoad() {
			
		},
		methods: {
			toDetail(){
				uni.navigateTo({
					url:'./quanDetail'
				})
			},
			
			toDaKa(item){
				uni.navigateTo({
					url:'./daka?id='+item.id
				})
			},
			
			toMore(item){
				uni.navigateTo({
					url:'./dakaList'
				})
			},
			
			daohangTap(item) {
				uni.openLocation({
					latitude: item.latitude * 1,
					longitude: item.longitude * 1,
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.lunbo-box {
		width: 100%;
		height: 792rpx;
		position: relative;
		.img-pos{
			width: 100%;
			position: absolute;
			bottom: 100rpx;
			display: flex;
			justify-content: center;
			image{
				width:690rpx;
				height:240rpx;
			}
		}
	}
	
	.content-box{
		width:690rpx;
		margin:0rpx auto 0;
	}
	
	.title-box {
		width: 100%;
		height: 60rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 60rpx;
	
		.left {
			display: flex;
			align-items: center;
			font-size: 36rpx;
			font-weight: bold;
			color: #002A3A;
			line-height: 52rpx;
	
			image {
				width: 52rpx;
				margin-right: 16rpx;
			}
		}
	
		.right {
			width: 116rpx;
			height: 48rpx;
		}
	}
	
	.item-box {
		width: 100%;
		height: 240rpx;
		margin-bottom: 52rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		.bg-box {
			width:100%;
			height:100%;
			position: absolute;
			left: 0;
			top: 0
		}
	
		.left {
			width: 250rpx;
			height: 100%;
			position: relative;
			display: flex;
			justify-content: center;
	
			.big-box {
				width: 190rpx;
				height: 190rpx;
				background: #884FFF;
				border-radius: 32rpx;
				transform: translateY(-16rpx);
	
				.s-box {
					width: 190rpx;
					height: 190rpx;
					border-radius: 32rpx;
					overflow: hidden;
					transform: translate(-6rpx,-6rpx);
				}
			}
		}
	
		.right {
			flex: 1;
			position: relative;
			padding-right:20rpx;
			box-sizing: border-box;
	
			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #000;
				line-height: 40rpx;
			}
	
			.fen-box {
				position: relative;
				margin-top: 15rpx;
	
				>image {
					width: 138rpx;
					height: 40rpx;
					position: absolute;
					left: 0;
				}
	
				.s-fen-box {
					width: 138rpx;
					height: 40rpx;
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					color: #FFDD57;
	
					image {
						width: 20rpx;
						height: 20rpx;
						margin-right:10rpx;
					}
	
					text {
						font-size: 33rpx;
						font-family: AaHouDiHei;
						font-weight: bold;
						margin-top: -5rpx;
					}
				}
			}
	
			.addr-box {
				font-size: 28rpx;
				display: flex;
				margin-top: 15rpx;
				font-weight: bold;
	
				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 6rpx;
				}
			}
		}
	}
</style>